<template>
  <div class="app-container" style="padding: 5px;">
    <el-form :inline="true" :model="queryForm" class="demo-form-inline">
      <el-form-item style="margin-bottom:10px;">
        <el-input v-model="queryForm.keywords" prefix-icon="el-icon-search" placeholder="POI名称" style="width: 14.5rem"
          @input="onQuerySubmit" />
      </el-form-item>
      <el-form-item style="margin-bottom:10px;">
        <el-select v-model="selectId" clearable placeholder="请选择图层" @change="handleSelectChange">
          <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item style="margin-bottom: 10px">
        <el-button type="primary" icon="el-icon-plus" @click="handleAdd">添加POI</el-button>
      </el-form-item>
      <el-form-item style="margin-bottom: 10px">
        <el-button type="warning" icon="el-icon-plus" @click="handleLayer">绑定图层</el-button>
      </el-form-item>
    </el-form>

    <el-table ref="multipleTable" :data="tableData" border empty-text="暂无数据." v-loading="loading" style="width: 100%">
      <el-table-column type="selection" width="40">
      </el-table-column>
      <el-table-column type="index" label="序号" width="50" align="center" :index="indexMethod">
      </el-table-column>

      <el-table-column prop="cnText" label="英文名">
      </el-table-column>

      <el-table-column prop="enText" label="中文名">
      </el-table-column>

      <el-table-column prop="coordType" label="坐标类型" width="150" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.coordType=='0' ">UE坐标</span>
          <span v-if="scope.row.coordType=='1' ">经纬度坐标</span>
        </template>
      </el-table-column>
      <el-table-column width="200" prop="coord" label="坐标">
      </el-table-column>

      <el-table-column label="操作" width="130" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑
          </el-button>
          <el-button type="text" size="small" @click="handleDelete(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- <el-row>
      <el-col :span="24">
        <div align="right" style="margin-top: 0.3125rem;">
          <el-pagination background layout="prev, pager, next" :current-page="page.cur" :page-size="page.limit"
            :total="page.total" @current-change="handleCurrentChange" />
        </div>
      </el-col>
    </el-row> -->
    <div style="text-align: right;padding-top: 0.3125rem;padding-bottom: 0.3125rem;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.cur"
        :page-size="page.limit" :total="page.total" :page-sizes="[30, 50, 100,200]"
        layout="prev, pager, next, total, sizes">
      </el-pagination>
    </div>

    <!--编辑框-->
    <info-drawer v-if="editDrawer.visible" :properties="editDrawer" @closed="close" @refresh="load" />
    <!-- 场景图层-->
    <LayerDrawer v-if="layerDrawer.visible" :properties="layerDrawer" @closed="close" @refresh="load" />
  </div>
</template>

<script>
  import InfoDrawer from './components/InfoDrawer.vue'
  import LayerDrawer from './components/LayerDrawer.vue'
  import {
    findPoiList,
    deletePoi,
  } from '@/api/scenesrc/poi'
  import {
    findLayerAll,
  } from '@/api/scenesrc/layer'
  import {
    isOk
  } from '@/utils/request'
  export default {
    name: 'POI',
    components: {
      InfoDrawer,
      LayerDrawer,
    },
    computed: {

    },
    data() {
      return {
        loading: false,
        queryForm: {
          keywords: undefined,
        },
        page: {
          cur: 1,
          limit: 50,
          total: 0
        },
        selectId: '',
        layerId: '',
        options: [],
        tableData: [],
        editDrawer: {
          visible: false,
          type: '0',
          data: {}
        },
        layerDrawer: {
          visible: false,
          data: {}
        },
      }
    },
    created() {
      this.load()
      this.getOptions()
    },
    methods: {
      indexMethod(index) {
        return index + 1;
      },
      onQuerySubmit(event) {
        this.load()
      },
      onReset(event) {
        this.queryForm.keywords = undefined;
        this.queryForm.status = '';
        this.load()
      },
      load() {
        this.loading = true
        findPoiList({
            layerId: this.layerId,
            cur: this.page.cur,
            limit: this.page.limit,
            keywords: this.queryForm.keywords,
          }).then(rsp => {
            if (isOk(rsp)) {
              const _data = rsp.result
              this.page.total = _data.totalRow
              this.tableData = _data.list
              this.loading = false
            }
          }).catch(err => {
            console.log(err);
          })
          .finally(() => {
            this.loading = false
          })
      },
      getOptions: function() {
        findLayerAll().then(rsp => {
          if (200 == rsp.code) {
            this.options = rsp.result
          }
        })
      },
      handleSizeChange(val) {
        this.page.limit = val
        this.load()
      },
      handleCurrentChange(cur) {
        this.page.cur = cur
        this.load()
      },
      handleSelectChange(e) {
        this.layerId = e
        this.load()
      },
      handleAdd: function(e) {
        this.editDrawer.visible = true
        this.editDrawer.type = '0'
      },
      handleEdit: function(data) {
        this.editDrawer.visible = true
        this.editDrawer.type = '1'
        this.editDrawer.data = data
      },
      handleLayer: function(data) {
        let rows = this.$refs.multipleTable.selection
        if (rows.length == 0) {
          this.$message.warning('请选择资源！');
        } else {
          this.layerDrawer.visible = true
          this.layerDrawer.data = rows
        }
      },
      close: function(e) {
        this.editDrawer.visible = false
        this.editDrawer.data = {}
        this.layerDrawer.visible = false
        this.layerDrawer.data = {}
        this.load()
      },
      handleDelete: function(data) {
        this.$confirm('确认删除【' + data.name + '】吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          deletePoi({
              id: data.id
            }).then(response => {
              this.$message({
                message: '删除成功',
                type: 'success',
                duration: 500
              })
              this.load()
            }).catch(err => {
              console.log(err);
            })
            .finally(() => {
              this.loading = false
            })
        })
      },
    }
  }
</script>
<style scoped>
  /deep/.el-card__header {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /deep/.layer-card .el-card__body {
    padding: 5px;
  }
</style>
